<script setup lang="ts">
import { ref } from 'vue'
import { Message } from 'element-ui'

const props = defineProps({
  recordArr: {
    type: Array,
    required: true,
  },
  year: {
    type: [String, Number],
    required: true,
  },
})

const tableData = ref([])

const inputData = (data) => {
  tableData.value = data
}

const property = {
  projectCompleteInfoList: [
    'projectName',
    'projectNo',
    'totalInvestment',
    'addInvestment2',
  ],
  projectBankInfoList: [
    'bankName',
    'creditLimit',
    'addInvestment',
    'yearLimit',
    'yearRate',
  ],
  projectFinanceInfoList: ['financeWay', 'financeInvestment', 'income'],
  projectProblemInfoList: ['suggestion'],
}

const totalList = [
  ...property.projectCompleteInfoList,
  ...property.projectBankInfoList,
  ...property.projectFinanceInfoList,
  ...property.projectProblemInfoList,
]

// const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
//   const currentProperty = column.property
//   const f = props.recordArr?.find((item) => item.pkid === row.pkid)
//   if (f) {
//     const max = f.rowSpan
//     if (!totalList.includes(currentProperty)) {
//       return [max, 1]
//     } else {
//       const keys = Object.keys(property)
//       const cf = keys.find((key) => property[key].includes(currentProperty))
//       if (cf) {
//         const newKey = cf + 'Length'
//         const currentLength = f[newKey]
//         const len = max - currentLength
//         return [1, len + 1]
//       }
//     }
//   } else {
//     return [1, 1]
//   }
// }
const arraySpanMethod = ({ row, column }) => {
  const currentProperty = column.property
  const recordEntry = props.recordArr?.find((item) => item.pkid === row.pkid)

  if (recordEntry) {
    const { rowSpan } = recordEntry

    if (!totalList.includes(currentProperty)) {
      return [rowSpan, 1]
    } else {
      const fieldKey = Object.keys(property).find((key) =>
        property[key].includes(currentProperty)
      )

      if (fieldKey) {
        const currentLength = recordEntry[`${fieldKey}Length`] || 0
        return [rowSpan - currentLength + 1, 1]
      }
    }
  }

  return [1, 1]
}

defineExpose({
  inputData,
})
</script>

<template>
  <div class="fill-table">
    <el-table :data="tableData" border :span-method="arraySpanMethod">
      <el-table-column type="index" label="序号" />
      <el-table-column prop="regionName" label="区县" show-overflow-tooltip />
      <el-table-column
        width="180px"
        prop="projectName2"
        label="项目名称"
        show-overflow-tooltip
      />
      <el-table-column
        prop="completeTarget"
        :label="year + '年开完工目标'"
        show-overflow-tooltip
      />
      <el-table-column
        prop="projectStageName"
        label="当前项目阶段"
        show-overflow-tooltip
      />
      <el-table-column
        prop="planTotalInvestment"
        label="计划总投资（亿元）"
        show-overflow-tooltip
      />
      <el-table-column
        prop="totalUpdateChangeArea"
        label="累计更新完成改造面积（万平方米）"
        show-overflow-tooltip
      />
      <el-table-column
        prop="addUpdateChangeArea"
        :label="year + '更新完成改造面积（万平方米）'"
        show-overflow-tooltip
      />
      <el-table-column label="项目投资及入统情况" :align="'center'" prop="any">
        <el-table-column label="累计完成投资" prop="any">
          <el-table-column
            prop="addCompleteInvestment"
            label="累计完成投资（亿元）"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="totalInvestment"
            label="其中累计入统金额（亿元）"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="projectNo"
            label="入统行业代码"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="projectName"
            label="入统项目名称"
            show-overflow-tooltip
          >
          </el-table-column>
        </el-table-column>

        <el-table-column :label="year + '年度计划完成投资（亿元）'">
          <el-table-column
            prop="yearPlanTotalInvestment"
            label="年度计划完成投资"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="monthPlanTotalInvestment"
            label="年初截至本月已完成投资（亿元）"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="addInvestment"
            label="年初截至本月入统金额（亿元）"
            show-overflow-tooltip
          >
          </el-table-column>
        </el-table-column>
      </el-table-column>
      <el-table-column label="项目融资" :align="'center'" prop="any">
        <el-table-column label="银行授权" prop="any">
          <el-table-column
            prop="bankName"
            label="授权银行"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="creditLimit"
            label="授信额度（亿元）"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="addInvestment"
            label="累计放款（亿元）"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="yearLimit"
            label="贷款年限"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column prop="yearRate" label="年利率" show-overflow-tooltip>
          </el-table-column>
        </el-table-column>

        <el-table-column label="其他融资方式" prop="any">
          <el-table-column
            prop="financeWay"
            label="融资方式"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="financeInvestment"
            label="融资金额（亿元）"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="income"
            label="到位金额（亿元）"
            show-overflow-tooltip
          >
          </el-table-column>
        </el-table-column>
      </el-table-column>
      <el-table-column
        label="需要市级协调的问题及建议"
        prop="suggestion"
        show-overflow-tooltip
      />
      <el-table-column
        label="业主单位联系人"
        prop="unitPeople"
        show-overflow-tooltip
      />
      <el-table-column
        width="80px"
        label="联系人手机号码"
        prop="unitConcat"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          {{ row.unitConcat }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped lang="scss">
.fill-table {
  position: relative;

  .fill-buttons {
    position: absolute;
    top: -40px;
    right: 16px;

    .danger-color {
      color: #f78989;
    }
  }

  :deep(.el-table__cell) {
    overflow: hidden;
  }
}
</style>
